﻿@{ 
    Layout = "";
}
<style>
    .my-drop-zone {
        border: dotted 3px lightgray;
    }

    .nv-file-over {
        border: dotted 3px red;
    }
    /* Default class applied to drop zones on over */
    .another-file-over-class {
        border: dotted 3px green;
    }

    html, body {
        height: 100%;
    }

    canvas {
        background-color: #f3f3f3;
        -webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
        -moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
        box-shadow: 3px 3px 3px 0 #e3e3e3;
        border: 1px solid #c3c3c3;
        height: 100px;
        margin: 6px 0 0 6px;
    }

    .ngdialog.ngdialog-theme-plain .ngdialog-content {
        width: 50% !important;
    }
</style>
<div ng-controller="OrderEditController">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <form name="formValidate" ng-submit="submitForm()" novalidate="" class="form-validate form-horizontal">
                    <!-- START 基本信息panel-->
                    <div class="panel panel-default" ng-class="{ 'whirl standard': isLoading}">
                        <div class="panel-body">
                            <fieldset class="b0">
                                <legend>{{Order.Id == 0 || Order.Id == null ? '添加订单' : '修改订单'}}</legend>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">会员名称</label>
                                    <div class="col-sm-4">
                                        <div class="form-inline">
                                            <input type="text"  ng-model="MemberName" class="form-control" maxlength="200" />
                                            <select ng-options="m.Id as m.NickName for m in MemberList" ng-model="Order.MemberId" class="form-control" name="MemberId">
                                                <option value="0">匿名用户</option>
                                            </select>
                                            <button type="button" class="btn btn-info" ng-click="seachMember()">搜索</button>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">收货人姓名</label>
                                    <div class="col-sm-4">
                                        <input type="text" name="ReceiveName" required="" ng-model="Order.ReceiveName" class="form-control" maxlength="200" />
                                        <span ng-show="validateInput('ReceiveName', 'required')" class="text-danger">请输入收货人姓名</span>
                                    </div>
                                    <div class="col-sm-4">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">地址</label>
                                    <div class="col-sm-8">
                                        <div class="form-inline">
                                            <select ng-options="m.Id as m.Name for m in ProvinceList" ng-model="Order.ReceiveProvince" name="ReceiveProvince" ng-change="GetCitys()" class="form-control">
                                                <option value="">选择省份</option>
                                            </select>
                                            <select ng-options="m.Id as m.Name for m in CityList" ng-model="Order.ReceiveCity" ng-change="GetAreas()" class="form-control">
                                                <option value="">选择城市</option>
                                            </select>
                                            <select ng-options="m.Id as m.Name for m in AreaList" ng-model="Order.ReceiveArea" name="ReceiveArea" class="form-control">
                                                <option value="">选择区域</option>
                                            </select>
                                            <input type="text" name="ReceiveAddress" placeholder="详细地址" required="" ng-model="Order.ReceiveAddress" class="form-control col-3" maxlength="200" />
                                            <span ng-show="validateInput('ReceiveArea', 'required')" class="text-danger">请选择区域</span>
                                            <span ng-show="validateInput('ReceiveAddress', 'required')" class="text-danger">请输入详细地址</span>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">手机</label>
                                    <div class="col-sm-4">
                                        <input maxlength="50" type="text" name="ReceivePhone" required="" ng-model="Order.ReceivePhone" class="form-control" />
                                        <span ng-show="validateInput('ReceivePhone', 'required')" class="text-danger">请填写手机号</span>
                                    </div>
                                    <div class="col-sm-4">
                                            <h4 class="text-danger">*</h4>
                                        </div>
                                </div>
                            </fieldset>
                           
                           

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">购买商品</label>
                                    <div class="col-sm-10">
                                        <div>
                                            <table ng-table="relatedProductsTableParams" class="table table-striped table-bproducted table-hover">
                                                <colgroup>
                                                    <col style="width: 20%" />
                                                    <col style="width: 20%" />
                                                    <col style="width: 20%" />
                                                    <col style="width: 10%" />
                                                    <col style="width: 20%" />
                                                    <col style="width: 10%" />
                                                </colgroup>
                                                <thead>
                                                    <tr>
                                                        <th class="text-center" colspan="2">产品名称</th>
                                                        <th class="text-center">规格</th>
                                                        <th class="text-center">销售价</th>
                                                        <th class="text-center">库存</th>
                                                        <th class="text-center">数量</th>
                                                        <th class="text-center"></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr ng-repeat="relationProduct in $data">
                                                        <td class="text-left" style="vertical-align: middle">
                                                            <img ng-src="{{ImgHostUrl+ relationProduct.ImgUrl}}" style="max-width: 100px; max-height: 100px; text-align: center;" onerror="javascript: this.src = '/Content/img/default.png';" />
                                                        </td>
                                                        <td class="text-left">{{relationProduct.Name}}</td>
                                                        <td class="text-center">{{relationProduct.SpecNames}}</td>
                                                        <td class="text-center">{{relationProduct.Price.toFixed(2)}}</td>
                                                        <td class="text-center">{{relationProduct.Stock-relationProduct.WaitSendStock}}</td>
                                                        <td class="text-center">
                                                            <input class="form-control" max="{{relationProduct.Stock-relationProduct.WaitSendStock}}" min="1" name="stock{{$index}}" type="number" required="" ng-model="relationProduct.BuyCount" ng-pattern="/^[1-9]{1}[\d]*$/" maxlength="8">
                                                            <span ng-show="validateInput('stock' + $index, 'required')" class="text-danger">请输入购买数量</span>
                                                            <span ng-show="validateInput('stock' + $index, 'pattern')" class="text-danger">请输入正确的购买数量</span>
                                                        </td>
                                                        <td class="text-center">
                                                            <button type="button" class="btn btn-warning" ng-click="delectThisData(relationProduct.Id)">删除</button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <span ng-show="SpikeActivityInfoList.length == 0" class="text-danger">请选择商品</span>
                                            <br />
                                            <div class="text-right">
                                                <button type="button" class="btn btn-info" ng-click="relationProductSelectInit()">选择商品</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">备注</label>
                                    <div class="col-sm-4">
                                        <textarea placeholder="订单备注" class="form-control" maxlength="100" ng-model="Order.Remark"></textarea>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <!-- END panel-->
                    <div class="text-center">
                        <button type="button" class="btn btn-warning" ng-click="cancel()">返 回</button>
                        <button type="submit" class="btn btn-info" >保 存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script type="text/ng-template" id="productSelectDialogId">
        <div class="ngdialog-message">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="form-inline ng-pristine ng-valid">
                        <div class="form-group">
                            <input placeholder="关键字" class="form-control" type="text" ng-model="ProductSelectModel.Keywords">
                            <select ng-options="m.Id as m.CategoryName for m in FirstCategoryList" ng-model="ProductSelectModel.FirstCategoryId" ng-change="GetSecondCategory()" class="form-control">
                                <option value="">请选择一级分类</option>
                            </select>
                            <select ng-options="m.Id as m.CategoryName for m in SecondCategoryList" ng-model="ProductSelectModel.SecondCategoryId" class="form-control">
                                <option value="">请选择二级分类</option>
                            </select>
                            <button type="submit" class="btn btn-labeled btn-primary" ng-click="tableParams.$params.page = 1;tableParams.reload()">
                                <span class="btn-label">
                                    <em class="fa fa-search"></em>
                                </span>搜索
                            </button>
                        </div>
                    </div>
                </div>
                <table ng-table="tableParams" class="table table-striped table-bproducted table-hover">
                    <colgroup>
                        <col style="width: 10%" />
                        <col style="width: 15%" />
                        <col style="width: 20%" />
                        <col style="width: 15%" />
                        <col style="width: 15%" />
                        <col style="width: 15%" />
                        <col style="width: 10%" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th class="text-center"></th>
                            <th class="text-center" colspan="2">产品名称</th>
                            <th class="text-center">规格</th>
                            <th class="text-center">销售价</th>
                            <th class="text-center">可销库存</th>
                        </tr>
                    </thead>
                    <tr ng-repeat="product in $data">
                        <td>
                            <div class="checkbox c-checkbox">
                                <label>
                                    <input type="checkbox" ng-click="checkProduct($event,product)" ng-checked="isChecked(product.Id)" />
                                    <span class="fa fa-check"></span>
                                </label>
                            </div>
                        </td>
                        <td>
                            <img ng-src="{{ImgHostUrl+ product.ImgUrl}}" style="max-width: 100px; max-height: 100px;text-align:center;margin-left:5px" onerror="javascript: this.src = '/Content/img/default.png';" />
                        </td>
                        <td class="text-left"> {{product.Name}}</td>
                        <td class="text-center">{{product.SpecNames}}</td>
                        <td class="text-center">{{product.Price.toFixed(2)}}</td>
                        <td class="text-center">{{product.Stock-product.WaitSendStock}}</td>
                    </tr>
                </table>
                <div class="panel-footer">
                    <div class="form-inline ng-pristine ng-valid">
                        <div class="form-group ">已选择产品：</div>
                        <div class="form-group " ng-repeat="select in SpikeActivityInfoList">
                            <a href="" class="mr-sm label label-primary" ng-click="SpikeActivityInfoList.splice($index, 1);" title="{{select.Name}}">
                                {{select.Name}}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="panel-footer text-right">
                    <button type="button" class="btn btn-primary" ng-click="closeDialog()">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </script>
</div>


<script type="text/javascript">
    App.controller('OrderEditController', ["$scope", "$state", "$http", "$stateParams", "Notify", "$filter", 'ngTableParams', 'ngTableDataService', 'ngDialog', '$rootScope',
        function ($scope, $state, $http, $stateParams, Notify, $filter, ngTableParams, ngTableDataService, ngDialog, $rootScope) {
            'use strict';
            $scope.submitted = false;
            $scope.isLoadingProduct = true;
            $scope.SpikeActivityInfoList = [];
            $scope.ProductSelectModel = {};
            $scope.validateInput = function (name, type) {
                var input = $scope.formValidate[name];
                return (input.$dirty || $scope.submitted) && input.$error[type];
            };

            //数据初始化
            $scope.MemberList = [{ "Id": "0", "NickName": "匿名用户" }];
            $scope.Order = {};
            $scope.Order.MemberId = 0;

            if ($stateParams.id != null && $stateParams.id > 0) {
                $scope.isLoading = true;
                $http.post("/Order/GetOrderInfo", { Id: $stateParams.id }).then(function (response) {
                    console.log(response);
                    $scope.Order = response.data;
                    if (!$scope.Order) {
                        Notify.alert("该订单不存在", { status: 'warning' });
                        $state.go('admin.orderInfoManage');
                        $scope.Order = {};
                    }
                    else {
                        $http.post("/CommonArea/GetAllAreaList").then(function (response) {
                            $scope.AllAreaList = response.data;

                            $scope.ProvinceList = $filter('filter')($scope.AllAreaList, function (item) { return item.ParentId === 0; });
                            $scope.CityList = $filter('filter')($scope.CategoryList, function (item) { return item.ParentId === $scope.Order.ReceiveProvince; });
                            $scope.AreaList = $filter('filter')($scope.CategoryList, function (item) { return item.ParentId === $scope.Order.ReceiveCity; });

                        });
                    }
                    //$rootScope.initArea($scope.AgentInfo.HomeProvince, $scope.AgentInfo.HomeCity);
                    $scope.isLoading = false;
                });
            }
            else {
                $http.post("/CommonArea/GetAllAreaList").then(function (response) {
                    $scope.AllAreaList = response.data;

                    $scope.ProvinceList = $filter('filter')($scope.AllAreaList, function (item) { return item.ParentId === 0; });


                });
            }
            $http.post("/Order/GetProductCateList").then(function (response) {

                $scope.CategoryList = response.data.data;

                //获取一级分类
                $scope.FirstCategoryList = $filter('filter')($scope.CategoryList, function (item) { return item.ParentId === 0; });

                
            });

            //获取二级分类
            $scope.GetSecondCategory = function () {
                $scope.SecondCategoryList = $filter('filter')($scope.CategoryList, function (item) { return item.ParentId === $scope.ProductSelectModel.FirstCategoryId; });
            }

            $scope.GetCitys = function () {
                $scope.CityList = $filter('filter')($scope.AllAreaList, function (item) { return item.ParentId === $scope.Order.ReceiveProvince; });
                $scope.AreaList = {};
            }

            $scope.GetAreas = function () {
                $scope.AreaList = $filter('filter')($scope.AllAreaList, function (item) { return item.ParentId === $scope.Order.ReceiveCity; });
            }

            // 提交
            $scope.submitForm = function () {
                $scope.isLoading = true;
                $scope.submitted = true;
                if ($scope.formValidate.$valid) {
                    
                    if (!$scope.SpikeActivityInfoList || $scope.SpikeActivityInfoList.length == 0) {
                        Notify.alert('未选择商品!', { status: 'warning', timeout: 1000 });
                        $scope.isLoading = false;
                        return false;
                    }
                    if ($scope.Order.ReceiveArea == "" || !($scope.Order.ReceiveArea>0)) {
                        Notify.alert('请选择区域', { status: 'warning', timeout: 1000 });
                        $scope.isLoading = false;
                        return false;
                    }
                    $http.post("/Order/SaveOrder", { order: $scope.Order, prolist: $scope.SpikeActivityInfoList }).then(function (returnData) {
                        if (returnData.data.isSuccess) {
                            Notify.alert('操作成功!', { status: 'success', timeout: 1000 });
                            $state.go("app.orderInfoManage");
                        } else {
                            Notify.alert(returnData.data.msg, { status: 'warning', timeout: 1000 });
                        }
                        $scope.isLoading = false;
                    });
                } else {
                    $scope.isLoading = false;
                    return false;
                }
            };

            //返回列表
            $scope.cancel = function () {
                $state.go('app.orderInfoManage');
            }

            //关闭产品选择弹框加载已选产品数据
            $scope.closeDialog = function () {
                $scope.relatedProductsTableParams.reload();
                ngDialog.closeAll();
            }
            //删除已经选择的产品
            $scope.delectThisData = function (id) {
                var tempData = [];
                $scope.SpikeActivityInfoList.forEach(function (item) {
                    if (item.Id != id) {
                        tempData.push(item);
                    }
                });
                $scope.SpikeActivityInfoList = tempData;
                $scope.relatedProductsTableParams.reload();
            }


            //已选择产品分页显示
            $scope.relatedProductsTableParams = new ngTableParams({
                page: 1,
                count: 5,
                sorting: {
                    Id: 'desc'     // 初始化排序
                }
            }, {
                getData: function ($defer, params) {
                    $scope.isLoadingProduct = true;
                    var requestParams = {
                        Skip: (params.page() - 1) * params.count(),
                        Take: params.count()
                    };
                    params.total($scope.SpikeActivityInfoList.length);
                    var tempActivityInfoList = [];
                    var starNum = 0;
                    $scope.SpikeActivityInfoList.forEach(function (item) {

                        var dataNum = starNum - requestParams.Skip;
                        if (dataNum >= 0 && dataNum < requestParams.Take) {
                            tempActivityInfoList.push(item);
                        }
                        starNum = starNum + 1;
                    });
                    $defer.resolve(tempActivityInfoList);
                    $scope.isLoadingProduct = false;
                }
            });



            //-----------产品选择相关
            //关联产品选择
            $scope.relationProductSelectInit = function () {
                $scope.ProductSelect = {};
                ngDialog.openConfirm({
                    template: 'productSelectDialogId',
                    className: 'ngdialog-theme-plain',
                    scope: $scope
                }).then(function (value) {
                }, function (reason) {
                }
                );
            }

            //-----------产品选择相关
            $scope.tableParams = new ngTableParams({
                page: 1,
                count: 10,
                sorting: {
                }
            }, {
                getData: function ($defer, params) {
                    $scope.isLoadingProduct = true;
                    var requestParams = {
                        Skip: (params.page() - 1) * params.count(),
                        Take: params.count(),
                        Keywords: $scope.ProductSelectModel.Keywords,
                        FirstCategoryIdParm: $scope.ProductSelectModel.FirstCategoryId,
                        SecondCategoryIdParm: $scope.ProductSelectModel.SecondCategoryId
                    };
                    $http.post('/Order/GetProductList', ngTableDataService.getServerSideParams(params.orderBy().toString(), params, requestParams))
                        .success(function (data, status) {
                            params.total(data.total);
                            $defer.resolve(data.data);

                            $scope.isLoadingProduct = false;
                        });
                }
            });


            //判断产品是否已选择
            $scope.isChecked = function (id) {
                var result = false;
                angular.forEach($scope.SpikeActivityInfoList, function (value, key) {
                    if (id == value.Id) {
                        result = true;
                        return false;
                    }
                });
                return result;
            }

            $scope.checkProduct = function ($event, productSpec) {
                if ($event.target.checked) {
                    $scope.SpikeActivityInfoList.push(productSpec);
                } else {
                    var currentSelected = $filter('filter')($scope.SpikeActivityInfoList, function (item) { return item.Id == productSpec.Id; });
                    if (currentSelected && currentSelected.length > 0) {
                        $scope.SpikeActivityInfoList.splice($scope.SpikeActivityInfoList.indexOf(currentSelected[0]), 1);
                    }
                }
            }

            $scope.seachMember = function ()
            {
                if ($scope.MemberName != "")
                {
                    $http.post("/Order/GetMemberList", { name: $scope.MemberName }).then(function (response) {
                        $scope.MemberList = response.data.data;
                    });
                }
            }
        }]);
</script>


